<!DOCTYPE html>
<html class="g-html">
<head>
	<meta charset="utf-8" />
	<meta name="renderer" content="webkit" />
	<meta name="keywords" content="Nui,Nui框架,Nui组件,axnfex,诺诺框架,诺诺前端,爱信诺框架,爱信诺前端" />
	<meta name="description" content="Nui框架是诺诺网前端团队根据自身业务的特点开发出来的模块化前端框架，提供了丰富的组件以适应不同业务需求进行快速开发。" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Nui.js</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="shortcut icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="stylesheet" type="text/css" href="/nui/assets/style/base-min.css?v=0de6a3f"/>
    
<link rel="stylesheet" type="text/css" href="/nui/pages/script/style/page-min.css?v=2ae1e04"/>

</head>
<body class="g-body">
	<!-- header -->
	<div class="g-header f-clearfix">
	    <a class="m-logo f-fl" href="/nui/">
            <img src="/nui/assets/images/logo.png?v=a987f30" alt="Nui.js" class="f-fl" />
            <em class="f-fl e-ml10 f-fs24">Nui.js</em>
        </a>
        <ul class="m-nav f-fr f-fs16">
            
	
	
    <li class="f-fl">
        <a class="s-crt" href="/nui/pages/">教程</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/2017/02/28/jobs/" target="_blank">加入我们</a>
    </li>
    <li class="f-fl">
        <a href="http://zjaisino.github.io/" target="_blank">前端规范</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/" target="_blank">团队博客</a>
    </li>


        </ul>
	</div>
	<!-- /header -->

	<!-- content -->
	<div class="g-content">
    
	<div class="g-main f-fr">
		<div class="mainbox">
			<h1 class="e-pt20 e-pb20 f-fs28">代理事件</h1>
			<div class="e-mt15 f-lh22">
				<p>传统事件回调绑定只能是一对一或者多对一，所有业务都在一个回调中处理，当功能复杂时可能导致代码冗余、可读性差，最终导致代码难以维护。</p>
				<p>代理事件模块允许事件与回调进行一对多或者多对多绑定，可将重复性的功能提取出来单独作为一个回调，从而提升代码可读性与复用率。</p>
			</div>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb">使用方法</h2>
			<p class="e-mt15 f-lh22">使用前需先作为依赖引入</p>
<script type="text/highlight" data-javascript-options>
Nui.define(['events'], function(events){
	events(参数)
})
</script>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb">选项参数</h2>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> element</h3>
			<div class="e-mt15 f-lh22">
				<p>类型：{Selector, jQuery Object}</p>
				<p>默认值：document</p>
				<p>必填：<b class="f-cgreen f-fs16">✔</b></p>
				<p>说明：设置代理对象，模块内部通过事件代理给元素绑定事件</p>
			</div>
			<h3 class="e-mt20 f-fs16"><b class="f-corange">#</b> events</h3>
			<div class="e-mt15 f-lh22">
				<p>类型：{Object}</p>
				<p>必填：<b class="f-cgreen f-fs16">✔</b></p>
				<p>说明：设置事件与回调，回调可以是函数，也可以是字符串，多事件之间用冒号“:”分隔，事件与选择器之间用空格分隔，多回调用空格分隔。</p>
			</div>
<script type="text/highlight" data-javascript-options>
{
	'event selector':'callback1 callback2 ...',
	'event:event selector':'callback1 callback2 ...',
	'event selector':function(){

	},
	'event:event selector':function(){

	}
}
</script>
			<h2 class="e-pt20 e-pb10 f-fs22 f-bb">案例</h2>
			<ul id="data" class="e-mt10 e-mb10"></ul>
			<button class="ui-button j-add e-mr10">新增</button>
			<button class="ui-button j-del e-mr10">删除</button>
			<button class="ui-button j-update e-mr10">修改</button>
<script type="text/highlight" data-javascript-options>
Nui.define(['template', 'events', '{com}/layer/confirm'], function(template, events, confirm){

    var evt = events({
        elem:$('#data'),
        data:['蔬菜', '水果', '苹果'],
        template:this.renders({
            <%each $list%>
            <li class="e-mt5">
                <label>
                    <input type="checkbox" value="<%$index%>">
                    <span><%$value%></span>
                </label>
            </li>
            <%/each%>
        }),
        events:{
            'click .j-add':'add render',
            'click .j-del':'checks del remove render',
            'click .j-update':'checks update'
        },
        checks:function(){
            var arr = [], elems = this.elem.find(':checked');
            if(!this.elem.find(':checked').length){
                return false
            }
            this.elem.find(':checked').each(function(){
                arr.push($(this).val())
            })
            return arr
        },
        render:function(){
            this.elem.html(template.render(this.template, this.data))
        },
        add:function(e, elem, data){
            this.data.push('自定义');
        },
        remove:function(){
            var data = [];
            Nui.each(this.data, function(v){
                if(typeof v !== 'undefined'){
                    data.push(v)
                }
            });
            this.data = data;
        },
        del:function(e, elem, data){
            var that = this;
            Nui.each(data, function(v){
                delete that.data[v]
            });
        },
        update:function(e, elem, data){
            var that = this;
            confirm('<input type="text" style="border:1px solid #ccc; width:180px; height:24px;" />', function(self){
                var val = Nui.trim(self.main.find('input').val());
                if(val){
                    Nui.each(data, function(v){
                        that.data[v] = val;
                    })
                    that.render();
                    return true
                }
            }, '', 210)
        }
    })

    evt.render()
})
</script>
		</div>
	</div>
	
	
<div class="f-fl g-sidecol">
    <div class="side">
        <ul class="m-menu f-lh28">
            <li>
                <a class="f-fs16" href="/nui/pages/">介绍</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/doc.html">API文档</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/util.html">实用工具</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/template.html">模板引擎</a>
                
            </li>
            <li>
                <a class="f-fs16 s-crt" href="/nui/pages/events.html">代理事件</a>
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/element.html">页面元素</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/components/">交互组件</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/pack.html">打包工具</a>
                
            </li>
        </ul>
    </div>
</div>


	</div>
	<!-- /content -->

	

    <script type="text/javascript" src="/nui/assets/script/jquery.min.js?v=4223d4c"></script>
<script type="text/javascript" src="/nui/dist/nui-load-min.js?v=94ae756"></script>
<script type="text/javascript" src="/nui/config.js?v=92da301"></script>
    
    <script type="text/javascript">
	Nui.load("{script}/base-min", function(page){
        page.init()
    })
    </script>
    
    <script type="text/javascript">
    
Nui.load("./script/events/page", function(page){
	
})

    </script>
</body>
</html>